<template>
  <div class="flex gap-x-2 p-4 box-border w-[100%] min-h-[110px] items-stretch mx-auto bg-white border-b">
    <div class="w-[37.5%] rounded-md overflow-hidden">
      <img
        class="w-full h-full"
        :src="
          data.event.cover
            ? data.event.cover + '?x-oss-process=image/resize,w_270,h_180,m_lfit'
            : defaultCover + '?x-oss-process=image/resize,w_270,h_180,m_lfit'
        "
      />
    </div>
    <div class="w-[63.5%] flex flex-col justify-center gap-y-2">
      <div class="text-[14px] text-black w-full font-bold">{{ data.event.subject }}</div>
      <div class="text-[12px] flex items-center text-[#005eff] font-bold">
        {{ moment(data.event.start_at * 1000).format('yyyy/MM/DD') }} -
        {{ moment(data.event.finish_at * 1000).format('yyyy/MM/DD') }}
      </div>
      <div class="flex items-center text-[12px]">
        <n-icon size="15" color="#005eff">
          <Location  />
        </n-icon>
        <div class="">
          {{ data.event.province }}
          <span v-show="data.event.province != data.event.city">{{ data.event.city }}</span>
          {{ data.event.address }}
        </div>
      </div>
      <!-- <div class="flex items-center gap-x-1 text-[12px] mt-3">
        <img
          class="w-4 h-4 rounded-full"
          src="https://static.huicanzhan.cn/common/official/sponsorlogo.jpeg?x-oss-process=image/resize,h_20,m_mfit"
        />
        <span class="text-black text-[12px]">{{ data.sponsor.company }}</span>
      </div> -->
    </div>
  </div>
</template>
<script setup lang="ts">
  import { Location } from '@vicons/ionicons5';
  import moment from 'moment';
  const defaultCover = 'https://static.huicanzhan.cn/common/official/defaultcover.png';
  defineProps<{
    data: any;
  }>();
</script>
